<template>
	
  <div id="app">
      
		<el-container>
		  <el-header style="height: 80px;">
			  <div style="width: 100%;  height:100% ; ">
				<!-- <button style="background-color: #00FFFF;" @click="openNav()">开关</button> 
				  <button style="background-color: #00FFFF;" @click="closeNav()">开关2</button> -->
				
				  <Header>  
				  </Header>
			  </div>
		  </el-header>
		  <div style="background-color: #242731; display: flex; justify-content: space-between;border-bottom: 10px; ">
			  <el-switch
			  style="margin-left: 30px;border-bottom: 10px;"
			      v-model="test"
			      active-color="#333A46"
			      inactive-color="#000000"
				  :width="60"
			  	@change="change()"
			  	>
			    </el-switch>
			 <!-- <div > -->
				 <!-- <span style="color: #F0F8FF;">{{textMap}}</span> -->
				 <!-- <el-button round style=" height: 25px; ">圆角按钮</el-button> -->
				<!-- <button class="upMap"  @click="getMap">更新地图</button> -->
				
			 <!-- </div> -->
			  </div>
		  <el-container>
			  
				  
		    <el-aside id="mySidenav"  >
				<Aside></Aside>
			</el-aside>
			  
			  
		    <el-main ref='main' style="width: 100%; background-color:#333A46 ; height: 100%;  min-height:891px; " >
				
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>      
    </div>
		
	 
  <!-- </div> -->
</template>

<script>

import Header from '../components/Header.vue'
import Aside from '../components/Aside.vue'
import Main from '../components/Main.vue'



export default {
  name: 'app',
  components: {
	  Header,
	  Aside,
	  Main
  },
  data(){
	  return {
		test: false,
		textMap:'请链接'
		  
	  }
	  
  },
  
  
  mounted(){
	  this.change()
	 
  },
	  
  methods:{
	  getMap(){
		  // let index =this.$store.state.objectPath.ReturnValue[1]
		  // let right=index.lastIndexOf('/')
		  // let left =index.indexOf('.')
		  // this.textMap=index.slice(right+1,left)
		  
		  this.axios.put('/remote/object/call',
		  {
		  	    "objectPath" :"/Script/EditorScriptingUtilities.Default__EditorLevelLibrary",
		  	    "functionName":"GetAllLevelActors"
		  },
		  {
		  	headers:{
		  		'Content-Type': 'application/json'
		  	}
		  }).then(
		  (res) =>{
		  	
		  	console.log("更新成功")
		  	this.$store.commit('serObjectPath',res.data)//更新ObjectPath
		  	let test =res.data.ReturnValue[1]
		  	this.UpMaps()
		  	
		  },
		  (err)=>{
		  	
		  }
		  
		  )
		  
	  },
	 change() {
		let decide=document.getElementById('poss').style.display
		 if(decide == ''){
			 document.getElementById('poss').style.display='none'
		 }
		 if(this.$store.state.properties){
			 this.UpMaps()
			 
		 }
		 if(this.test){
			document.getElementById("mySidenav").style.width = "200px";
			const testa =document.getElementById("mySidenav")
			
			
		 }else{
			document.getElementById("mySidenav").style.width = "0";
			const testa =document.getElementById("mySidenav")
			
			 
		 }
	    
	},
	
	
  }
  
}
</script>

<style  >
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
  background-color:#242731 ;
  height: 1000px;
}

.el-main{
	padding: 10px;
}
.el-aside{
	
	width: 200px;
	min-height: 100px; 
	background-color: #242731;
}
.upMap{
	width: 80px; height: 25px; border-radius: 10px;  color: #00FFFF; border: none; background-color: #545C64; 
	margin: 0px 25px 4px 5px ;
}
.upMap:active{
	
	/* background-color: #545C64; */
	 
	background-color: #242731;
}
.el-message{
	border-color: #333A46;
	background-color: #242731;
	top: 50px;
	opacity: 0.5;
	
}
.el-message--success .el-message__content{
	color: #00FFFF;
}
.el-message .el-icon-success{
	color: #00FFFF;
}
</style>
